/* eslint-disable react/prop-types */
/* eslint-disable react/no-danger */
import React from 'react';
import { Button, Loading } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/yunxiao-icon';
import FilePanel from 'components/filePanel';
import utils from 'utils';
import './index.scss';

const SearchMiddle = (props) => {
  const {
    leftData,
    middleData: { docId, source, highlightTextMap },
    closeMiddleMode,
    setRowColSpanRight,
    rowSpanCol: { rightOpen },
    middleLoading,
  } = props;
  const bodyHeight = leftData.length <= 10 ? 242 : 286;
  return (
    <div className="codeup_search_right_cons codeup_search_middle" key={docId}>
      <div className="codeup_search_right_con code_search_moddle_table">
        <Loading visible={middleLoading} style={{ width: '100%' }}>
          <div className="codeup_search_right_table codeup_middle_table">
            <FilePanel>
              <FilePanel.Header>
                <div className="codeup_search_right_table_header">
                  <div className="codeup_search_right_table_header_left_title">
                    <YunxiaoIcon
                      type="file-line"
                      style={{ transform: 'rotate( 180deg)', marginRight: 5, color: '#A6A6A6' }}
                    />
                    {source && utils.getGroupPath(source?.repoPath)} -
                    <span>{source?.fileName}</span>
                    {/* {
                      middleLoading ? <span className="search_midder_skeleton_name" /> : (
                        <>
                          {source && utils.getGroupPath(source?.repoPath)} -
                          <span>{source?.fileName}</span>
                        </>
                      )
                    } */}
                  </div>
                  <div
                    className="codeup_search_right_table_header_right_close"
                    onClick={closeMiddleMode}
                  >
                    <YunxiaoIcon type="false-line" style={{ color: 'rgb(139, 139, 139)' }} />
                  </div>
                </div>
              </FilePanel.Header>
              <div
                className="codeup_search_right_table_con codeup_search_middle_table_con"
                style={{ height: `calc( 100vh - ${bodyHeight}px )` }}
              >
                {highlightTextMap?.clob && (
                  <FilePanel.Body noPadding style={{ maxHeight: '400px' }}>
                    {/* {
                      middleLoading ? (
                        <div className="search_middle_skeleton_content">
                          <ul className="middle_skeleton_paragraph">
                            <li style={{ width: '50%' }} />
                            <li style={{ width: '60%' }} />
                            <li style={{ width: '40%' }} />
                            <li />
                            <li />
                          </ul>
                        </div>
                      ) :
                        <pre>
                          <code
                            dangerouslySetInnerHTML={{
                              __html: highlightTextMap?.clob?.replace('\n', '<br />'),
                            }}
                          />
                        </pre>
                    } */}
                    <pre>
                      <code
                        dangerouslySetInnerHTML={{
                          __html: highlightTextMap?.clob?.replace('\n', '<br />'),
                        }}
                      />
                    </pre>
                  </FilePanel.Body>
                )}
              </div>
            </FilePanel>
          </div>
        </Loading>
      </div>
      {!rightOpen && (
        <div className="codeup_search_right_open">
          <div className="codeup_search_right_open_icon">
            <Button
              text
              onClick={() => {
                setRowColSpanRight(rightOpen);
              }}
            >
              <YunxiaoIcon
                type={!rightOpen ? 'arrow-left-2-line' : 'arrow-right-2-line'}
                style={{
                  border: '1px solid #e8e8e8',
                  borderRadius: '50%',
                  backgroundColor: 'var(--color-fill1-6, #8b8b8b)',
                  color: '#fff',
                }}
              />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};

export default SearchMiddle;
